<template>
  <div class="map_box">
    <baidu-map
      class="bmView"
      :scroll-wheel-zoom="true"
      :center="center"
      :zoom="zoom"
      :map-click="false"
      @moveend="syncCenterAndZoom"
      @zoomend="syncCenterAndZoom"
      @ready="mapReady"
      ak="XOP1GkqnpIHIuXEeWpPWQw6ew5Fqyczl"
    >
      <bml-heatmap class="heat_map" :data="data" :max="100" :radius="20"></bml-heatmap>
    </baidu-map>
  </div>
</template>

<script>
import { BmlHeatmap } from "vue-baidu-map";
export default {
  data() {
    return {
      BMap: null, // 地图组件是否就绪
      choosedLocation: { province: "", city: "", district: "", addr: "" },
    //   data: [
    //     { lng: 117.116895, lat: 36.667582, count: 50 },
    //     { lng: 117.116608, lat: 36.66811, count: 51 },
    //     { lng: 117.116527, lat:36.667545, count: 80 },
    //     { lng: 117.116302, lat:36.668132, count: 70 },
    //     { lng: 117.116302, lat:36.668132, count: 60 },
    //     { lng: 117.114038, lat:36.667241, count: 60 },
    //   ],
      center: { lng: 0, lat: 0 },
      zoom: 12,
      center: {
        lng: 117.022306,
        lat: 36.667463,
      },
    };
  },
  props:{
      data:{
          type:Array,
          default:[]
      }
  },
  components: {
    BmlHeatmap,
  },
  methods: {
    syncCenterAndZoom(e) {
      // 返回地图当前的缩放级别
      this.zoom = e.target.getZoom();
      const position = e.target.getCenter();
      // 此时已经可以获取到BMap类
      if (this.BMap) {
        const that = this;
        // Geocoder() 类进行地址解析
        // 创建地址解析器的实例
        const geoCoder = new this.BMap.Geocoder();
        // getLocation() 类--利用坐标获取地址的详细信息
        // getPoint() 类--获取位置对应的坐标
        geoCoder.getLocation(position, function (res) {
          // console.log('获取经纬度', position, '获取详细地址', res)
          const addrComponent = res.addressComponents;
          const surroundingPois = res.surroundingPois;
          const province = addrComponent.province;
          const city = addrComponent.city;
          const district = addrComponent.district;
          let addr = addrComponent.street;
          if (surroundingPois.length > 0 && surroundingPois[0].title) {
            if (addr) {
              addr += `-${surroundingPois[0].title}`;
            } else {
              addr += `${surroundingPois[0].title}`;
            }
          } else {
            addr += addrComponent.streetNumber;
          }
          that.choosedLocation = {
            province,
            city,
            district,
            addr,
            ...position,
          };
          that.$emit("changeCenter", {
            zoom: that.zoom,
            location: that.choosedLocation,
          });
        });
      }
    },
    mapReady({ BMap, map }) {
      let mapStyle = { style: "midnight" };
      map.setMapStyle(mapStyle);
      // console.log(BMap, map);
      // var view = map.getViewport(eval(this.markers))
      // this.zoom = view.zoom;
      // this.center = view.center;
      // const that = this
      this.BMap = BMap;
      // if (this.BMap) {
      //     // 获取定位地址信息并赋值给声明变量
      //     // Geolocation 对象的 getCurrentPosition()、watchPosition()、clearWatch() 方法详解 ：https://blog.csdn.net/zyz00000000/article/details/82774543
      //     const geolocation = new this.BMap.Geolocation()
      //     // 通过 getCurrentPosition() 方法：获取当前的位置信息
      //     geolocation.getCurrentPosition(res => {
      //         console.log('返回详细地址和经纬度', res)
      //         const { lng, lat } = res.point
      //         const { province, city, district, street, street_number } = res.address
      //
      //         that.center = { lng, lat }
      //         that.choosedLocation = { province, city, district, addr: street + street_number, lng, lat }
      //         console.log(that.choosedLocation)
      //     })
      // }
    }
  },

  mounted() {
    // 创建和初始化地图函数
  },
};
</script>

<style  scoped>
.map_box {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 99;
  width: 100%;
  height: 100%;
}
.bmView {
  width: 100%;
  height: 100%;
  background-color: #08304A!important;
}
.bmView>div{
  background-color: none!important;
}
</style>